<template>
	<div>
		<div class="main" @dblclick="onEnter">
			<h3 class="title">刮开涂层中大奖</h3>
			<div class="prizeTxt" :class="{hide:!imgReady}">
				{{prize_data.name}}
			</div>
			<canvas ref="canvas"></canvas>
			<p class="dec">
				活动时间：3月29日-3月31日<br>每日可答题一轮， 每轮答题共10题答对6题以上即可刮取随机奖励
			</p>
			<p class="dec">
				奖品设置：<br> 神兽魂*80<br>精灵珍魂*1<br>+12强化保护券*1<br>子女装备福袋*1<br>万能碎片*1<br>游戏礼包Ⅰ<br>游戏礼包Ⅱ<br>游戏礼包Ⅲ
				<br>游戏礼包Ⅳ<br>K钻300

				<span>—— 活动解释权归3K游戏所有 ——</span>
			</p>
		</div>
		<transition name="fade">
			<div class="superbox" :class="{'show':showBox}">
				<prize @changeBox="changeBox('record')" v-if='this.$store.state.box.prize'></prize>
				<record @changeBox="changeBox('prize')" v-if='this.$store.state.box.record'></record>
				<a href="javascript:;" class="logo" v-if='this.$store.state.box.loading || this.$store.state.box.prompt'></a>
			</div>
		</transition>
	</div>
</template>

<script>
	import prize from '../components/prize.vue'
	import record from '../components/record.vue'
	
	let sleep = function(time) {
		return new Promise(function(resolve, reject) {
			setTimeout(function() {
				// 模拟出错了，返回 ‘error’
				resolve();
			}, time);
		})
	};
	export default {
		name: 'draw',
		data() {
			return {
				showBox: false,
				imgReady: false,
				canvas: '',
				ctx: '',
				w: '',
				h: '',
				area: '',
				x: '',
				y: '',
				offsetTop: '',
				offsetLeft: '',
				img: new Image(),
				radius: 15,

				prize_data: {
					'name': '123', //奖品名称
					'img': '', //奖品图片
					'remark': '', //奖品说明
					'type': 0, //奖品类型（1、代金券，2、礼包码，3、K钻， 4、实物 5、虚拟）
				}
			}
		},
		components: {
			prize,
			record
		},
		async mounted() {
			this.canvas = this.$refs.canvas;
			this.ctx = this.canvas.getContext('2d');
			this.w = this.canvas.width;
			this.h = this.canvas.height;
			this.offsetTop = this.canvas.offsetTop;
			this.offsetLeft = this.canvas.offsetLeft;
			this.area = this.w * this.h;
			let src;
			/*if(/:8088/.test(window.location.href)){
				src = 'http://h.test.3k.game/xcqy/quiz/static/img/prize-cover.png'
			} else {
				src = '/xcqy/quiz/static/img/prize-cover.png'
			}*/
			src = require('../img/prize-cover.png');

			this.img.src = src;
			this.img.addEventListener('load', () => {
				this.imgReady = true;
				this.ctx.drawImage(this.img, 0, 0, this.w, this.h);
				this.ctx.globalCompositeOperation = 'destination-out';
				this.canvas.addEventListener('touchmove', this.moveFunc, false);
				this.canvas.addEventListener('touchend', this.endFunc, false);
			});

			let res = await this.$store.dispatch('drawLottery');

			//			this.canvas.style.backgroundImage = 'url(' + res.img + ')';
			console.log(res);
			this.$store.commit('PRIZE_DETAIL', res.prize_info);　

			this.prize_data = Object.assign(this.prize_data, res.prize_info);
		},
		methods: {
			onEnter() {
				//				this.changeBox('prize')
			},
			changeBox(name) {
				document.querySelector("body").className = 'noScroll'
				this.showBox = true;
				this.$store.dispatch("changeBox", name);
			},
			closeBox() {
				document.querySelector("body").className = ''
				this.showBox = false;
				this.$store.dispatch("initBox");
			},
			moveFunc(e) {
				let touch = e.touches[0];
				this.x = touch.clientX - this.offsetLeft;
				this.y = touch.clientY - this.offsetTop + this.radius * 2;
				this.ctx.beginPath();
				this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, 0);
				this.ctx.fill();
			},
			async endFunc(e) {
				let data = this.ctx.getImageData(0, 0, this.w, this.h).data;
				let scrapeNum = 0;
				for(var i = 3, len = data.length; i < len; i += 4) {
					if(data[i] === 0) {
						scrapeNum++;
					}
				}
				if(scrapeNum > this.area * 0.1) {
					this.ctx.clearRect(0, 0, this.w, this.h);
					this.canvas.removeEventListener('touchmove', this.moveFunc, false);
					this.canvas.removeEventListener('touchend', this.endFunc, false);

					//刮开图层后 正式抽奖
					let res = await this.$store.dispatch('receiveLottery');
					await sleep(1000);
					console.log(res);
					this.changeBox('prize')
				}
			}
		},
		created() {
			document.querySelector("body").className = ''
		}
	}
</script>

<style lang="less" scoped>
	@import "../css/_modules.less";
	.main {
		min-height: 16.0rem;
		.bg();
		background-color: #151b2a;
		background-image: url(../img/bg-3.jpg);
		background-position: center 0;
		.title {
			padding-top: 2.01rem;
			padding-bottom: 1.85rem;
			line-height: 0.7rem;
			font-size: 0.24rem;
			color: #e8fcff;
			text-align: center;
			font-weight: normal;
		}
		.dec {
			width: 4.9rem;
			margin: 1.9rem auto 0;
			line-height: 0.4rem;
			font-size: 0.24rem;
			color: #e8fcff;
			text-align: center;
			span {
				font-size: 0.20rem;
				text-align: center;
				display: block;
				line-height: 0.5rem;
			}
		}
	}
	
	.prizeTxt {
		position: absolute;
		z-index: 1;
		top: 2.775rem;
		left: 50%;
		margin-left: -2.61rem;
		.wh(522, 180);
		text-align: center;
		line-height: 1.8rem;
		font-size: 0.38rem;
	}
	
	canvas {
		position: absolute;
		z-index: 2;
		top: 2.80rem;
		left: 50%;
		margin-left: -2.59rem;
		.wh(518, 175);
		.bg(1);
		/*background-image: url(../img/box-bg.png);*/
		border-radius: 0.15rem;
		&.link {
			/*background-image: url(../img/prize-cover.png);*/
		}
	}
</style>